<template>
  <div class="reg-container">
    <!-- 登录页 -->
    <!-- 表单 -->
    <div class="reg-form">
      <div class="title">诚信数据可视化展示平台</div>
      <div class="form-box">
        <el-form :model="regForm" :rules="rules" ref="reg" label-width="70px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="regForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="regForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="regForm.repassword" placeholder="请确认密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button type="primary" style="width: 100%;" @click="reg">注册</el-button>
      </div>
      <div class="log">
        <el-button type="text" @click="toLogin">去登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Reg',
  data() {
    // 自定义校验  判断 两次密码是否相同
    const samePwd = (rule, value, callback)=> {
      // rules基本没用 
      // value 要验证的表单元素的值（确认密码框的值）
      if(value === this.regForm.password) {
        // 验证通过
        callback()
      }else{
        callback('两次密码不一致')
      }
    }
    return {
      // 登录表单
      regForm: {
        username:'',
        password: '',
        repassword:''
      },
      rules:{
        username:[
          { required: true, message: "用户名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { pattern: /^\S{6,15}$/, message: "密码必须是6-15位的非空字符", trigger: "blur"},
        ],
        repassword: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { pattern: /^\S{6,15}$/, message: "密码必须是6-15位的非空字符", trigger: "blur"},
          // validator指定自定义校验规则的 samePwd是函数，用来写自定义校验规则
          { validator: samePwd, trigger: "blur" },
        ]
      }
    }
  },
  methods: {
    toLogin() {
      this.$router.push('/login')
    },
    reg() {
      // 兜底校验
      this.$refs.reg.validate((valid) => {
        if(valid) {
          // 校验通过
          // 调注册接口
          // 提示用户
          // 跳到登录页
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.reg-container {
  position: relative;
  // ???????
  height: 737px;
  background: url('@/static/images/login.jpg');
  background-position: center;
}


.reg-form {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background-color: #fff;
}
.title {
  // position: absolute;
  // z-index: 9;
  color: #889aa4;
  font-size: 24px;
  text-align: center;
}
.form-box{
  margin-top: 30px;
}
.btn {
  margin-top: 40px;
  
}
.log{
  margin-top: 10px;
  text-align: right;
  color: #ccc;
}
</style>